/**
 * Created by seth.yang on 2016/11/3
 */
(function ($) {
    if (!$.fn) {
        return;
    }

    if ($.fn.asDropdownPanel) {
        return;
    }

    var table, target, header, body, handler;

    function onRootOver () {
        if (handler) {
            clearTimeout (handler);
        }
    }

    function onRootOut () {
        handler = setTimeout (function () {
            table.hide ();
            handler = null;
        }, 500);
    }

    function buildPanel () {
        table = $('<table class="dp-panel"/>')
            .appendTo ($(document.body))
            .on ('mouseover', onRootOver)
            .on ('mouseout', onRootOut);
        var tr = $('<tr/>').appendTo (table);
        header = $('<td class="dp-header dp-handler-opened"/>')
            .on ('click', function () {
                table.hide ();
            }).appendTo (tr);
        $('<td class="dp-header-side"/>').appendTo (tr);
        tr = $('<tr/>').appendTo (table);
        body = $('<td class="dp-body" colspan="2"/>').appendTo (tr);
    }

    function show () {
        if (!target) {
            return;
        }

        var settings = target.data ('settings');
        var referTo = ('refer' in settings) ? $(settings ['refer']) : $(window);
        var O = referTo.offset ();
        var offset = target.offset (), W = referTo.width () + O.left;

        if ('beforeShow' in settings) {
            if (!settings ['beforeShow'] ()) {
                return;
            }
        }

        table.css ({left:offset.left, top:offset.top, 'max-width':W - offset.left - 10});
        header.text (target.text ());
        header.css ({width: target.width ()});
        body.text ('loading data ...');
        table.show ();

        var parameter = settings ['parameter'];
        if (parameter) {
            parameter = parameter ();
            dw.ajax (parameter, function (data) {
                body.empty ();
                var div = $('<div class="dp-container"/>').appendTo (body),
                    value = settings['valueField'],
                    text  = settings['textField'];
                for (var i = 0; i < data.length; i ++) {
                    $('<a class="dp-item"/>')
                        .attr ('data-id', data[i][value])
                        .text (data[i][text])
                        .on ('click', onClick)
                        .appendTo (div);
                }
            });
        }
    }

    function onClick () {
        var self = $(this), value = self.attr ('data-id'),
            text = self.text (), settings = target.data ('settings');
        target.text (text);
        table.hide ();
        ('onselect' in settings) &&
            (settings ['onselect'])(value, text);
    }

    $(buildPanel);

    $.fn.asDropdownPanel = function (options) {
        return $(this).each (function () {
            var self = $(this).data ('settings', options).addClass ('dp-handler dp-handler-closed')
                .on ('click', function () {
                    target = self;
                    show ();
                });
        });
    };
}) (jQuery);